import React, { lazy, Suspense } from "react";

import { HashRouter, Routes, Route, Navigate } from "react-router-dom";

import NotFound from "../../views/NotFound";

import { Spin } from 'antd';

const Home = lazy(() => import("../../views/Home"));
const About = lazy(() => import("../../views/About"));
const Search = lazy(() => import("../../views/SearchPage"));
const SongsDetail = lazy(() => import("../../views/detailPage/SongsDetail"));

const Recommend = lazy(() => import("../../commonents/index/Recommend"));
const Rank = lazy(() => import("../../commonents/index/Rank"));
const Playlist = lazy(() => import("../../commonents/index/Playlist"));
const DjRadio = lazy(() => import("../../commonents/index/DjRadio"));
const Singer = lazy(() => import("../../commonents/index/Singer"));
const Album = lazy(() => import("../../commonents/index/Album"));

const Albums = lazy(() => import("../../commonents/searchPage/Albums"));
const Artists = lazy(() => import("../../commonents/searchPage/Artists"));
const Lyrics = lazy(() => import("../../commonents/searchPage/Lyrics"));
const Playlists = lazy(() => import("../../commonents/searchPage/Playlists"));
const Songs = lazy(() => import("../../commonents/searchPage/Songs"));
const Userprofiles = lazy(() => import("../../commonents/searchPage/Userprofiles"));
const Videos = lazy(() => import("../../commonents/searchPage/Videos"));
const Voice = lazy(() => import("../../commonents/searchPage/Voice"));

function indexRouter() {
    return (
        <div>
            <HashRouter>
                <Suspense fallback={<div className="Loading"><Spin tip="Loading" size="large"></Spin></div>}>
                    <Routes>
                        <Route path="/" element={<Navigate to="/home/recommend" />} />
                        <Route path="/home" element={<Navigate to="/home/recommend" />} />
                        <Route path="/home" element={<Home />}>
                            <Route path="/home/recommend" element={<Recommend />} />
                            <Route path="/home/rank" element={<Rank />} />
                            <Route path="/home/playlist" element={<Playlist />} />
                            <Route path="/home/djradio" element={<DjRadio />} />
                            <Route path="/home/singer" element={<Singer />} />
                            <Route path="/home/album" element={<Album />} />
                        </Route>
                        <Route path='/about' element={<About />}></Route>
                        <Route path='/search' element={<Navigate to="/search/songs" />}></Route>
                        <Route path='/search' element={<Search />}>
                            <Route path="/search/songs" element={<Songs />} />
                            <Route path="/search/artists" element={<Artists />} />
                            <Route path="/search/playlists" element={<Playlists />} />
                            <Route path="/search/albums" element={<Albums />} />
                            <Route path="/search/userprofiles" element={<Userprofiles />} />
                            <Route path="/search/videos" element={<Videos />} />
                            <Route path="/search/Voice" element={<Voice />} />
                            <Route path="/search/lyrics" element={<Lyrics />} />
                        </Route>

                        <Route path="/songsDetail" element={<SongsDetail/>}></Route>
                        <Route path="*" element={<NotFound />}></Route>
                    </Routes>
                </Suspense>
            </HashRouter>
        </div>
    );
}

export default indexRouter
